<template>
    <h1>我是 APP 组件</h1>

    <button @click="myId = 'MyCom'">首页</button>
    <button @click="myId = 'MyCom2'">分类</button>
    <button @click="myId = 'MyCom3'">购物车</button>
    <button @click="myId = 'MyCom4'">个人页</button>


    <!--
        keep-alive 内置组件

            内部可以书写多个组件, 可以让内部书写的所有组件, 全都具有缓存性
                也就是组件切换后, 对组件内部的一些操作, 会被保存下来


        当前组件还有两个属性, 两个属性的属性值是一个数组
            include, 内部包含具有缓存性的组件名
            exclude, 内部包含不具有缓存性的组件名


            组件名需要是 组件内部的 name 属性
    -->
    <keep-alive :include="['MyCom3', 'MyCom4']">
        <component :is="myId"></component>
    </keep-alive>
</template>

<script>
import MyCom from "./components/my_com.vue";
import MyCom2 from "./components/my_com2.vue";
import MyCom3 from "./components/my_com3.vue";
import MyCom4 from "./components/my_com4.vue";
export default {
    data() {
        return {
            myId: "MyCom",
        };
    },
    components: {
        MyCom,
        MyCom2,
        MyCom3,
        MyCom4,
    },
};
</script>

<style scoped></style>
